<template>
  <div v-cloak id="app-root" :class="theme">
    <component :is="LayoutComponent">
      <router-view v-slot="{ Component, route }">
        <suspense>
          <transition name="page" mode="out-in" @before-enter="handlePageTransitionDone">
            <component :is="Component" :key="route.name" />
          </transition>
        </suspense>
      </router-view>
    </component>
  </div>
</template>

<script>
import { computed, defineComponent } from "vue";
import { useEnhandle } from "./enhandle";
import PCMain from "./components/layout/pc/main.vue";
import Mobile from "./components/layout/mobile/main.vue";

export default defineComponent({
  name: "App",
  setup() {
    const { theme, isMobile, store, globalState, route } = useEnhandle();

    const LayoutComponent = computed(() => {
      return isMobile.value ? Mobile : PCMain;
    });

    const handlePageTransitionDone = () => {
      globalState.setLayoutColumn(route.meta.isFullPage);
    };

    if (!isMobile.value) {
      store.dispatch("article/fetchHotList");
      store.dispatch("tag/fetchList", { page: 1, per_page: 30 });
    }

    return {
      LayoutComponent,
      theme: theme.theme,
      handlePageTransitionDone,
    };
  },
});
</script>

<style lang="scss" scoped>
#app-root {
  // min-height: 100vh;
  color: $text;

  &[v-cloak] {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
</style>